/* eslint-disable no-alert */
import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import Dashboard from 'components/dash/components/Dashboard'
import Sidebar from 'components/dash/components/Sidebar'
import { global as globalDuck } from 'ducks'
import { push } from 'react-router-redux'
import navMenu from './navMenu'
/*
const sb = [
  <Sidebar.Menu key="3">
    <Sidebar.Menu.Item icon={{ className: 'fa-database' }} title="数据集" />
    <Sidebar.Menu.Item icon={{ className: 'fa-sitemap' }} title="组织架构" />
    <Sidebar.Menu.Item icon={{ className: 'fa-tasks' }} title="项目" />
    <Sidebar.Menu.Item
      icon={{ className: 'fa-files-o' }}
      labels={[{ key: 1, type: 'primary', text: '4' }]}
      title="Layout Options"
    >
      <Sidebar.Menu.Item title="Top Navigation" />
      <Sidebar.Menu.Item title="Boxed" href="/boxed" />
      <Sidebar.Menu.Item title="Fixed" />
      <Sidebar.Menu.Item title="Collapsed Sidebar" />
    </Sidebar.Menu.Item>
    <Sidebar.Menu.Item
      icon={{ className: 'fa-th' }}
      labels={[{ key: 1, type: 'success', text: 'new' }]}
      title="Widgets"
    />
    <Sidebar.Menu.Item icon={{ className: 'fa-pie-chart' }} title="Charts">
      <Sidebar.Menu.Item title="ChartJS" />
      <Sidebar.Menu.Item title="Morris" />
      <Sidebar.Menu.Item title="Flot" />
      <Sidebar.Menu.Item title="Inline Charts" />
    </Sidebar.Menu.Item>
    <Sidebar.Menu.Item icon={{ className: 'fa-laptop' }} title="UI Elements">
      <Sidebar.Menu.Item title="General" />
      <Sidebar.Menu.Item title="Icons" />
      <Sidebar.Menu.Item title="Buttons" />
      <Sidebar.Menu.Item title="Sliders" />
      <Sidebar.Menu.Item title="Timeline" />
      <Sidebar.Menu.Item title="Modals" />
    </Sidebar.Menu.Item>
    <Sidebar.Menu.Item icon={{ className: 'fa-edit' }} title="Forms">
      <Sidebar.Menu.Item title="General Elements" />
      <Sidebar.Menu.Item title="Advanced Elements" />
      <Sidebar.Menu.Item title="Editors" />
    </Sidebar.Menu.Item>
    <Sidebar.Menu.Item icon={{ className: 'fa-table' }} title="Tables">
      <Sidebar.Menu.Item title="Simple tables" />
      <Sidebar.Menu.Item title="Data tables" />
    </Sidebar.Menu.Item>
    <Sidebar.Menu.Item
      icon={{ className: 'fa-calendar' }}
      labels={[{ key: 1, type: 'primary', text: '17' }, { key: 2, type: 'danger', text: '3' }]}
      title="Calendar"
    />
    <Sidebar.Menu.Item
      icon={{ className: 'fa-envelope' }}
      labels={[
        { key: 2, type: 'success', text: '16' },
        { key: 1, type: 'warning', text: '12' },
        { key: 3, type: 'danger', text: '5' },
      ]}
      title="Mailbox"
    />
    <Sidebar.Menu.Item icon={{ className: 'fa-folder' }} title="Examples">
      <Sidebar.Menu.Item title="Invoice" />
      <Sidebar.Menu.Item title="Profile" />
      <Sidebar.Menu.Item title="Login" />
      <Sidebar.Menu.Item title="Register" />
      <Sidebar.Menu.Item title="Lockscreen" />
      <Sidebar.Menu.Item title="404 Error" />
      <Sidebar.Menu.Item title="500 Error" />
      <Sidebar.Menu.Item title="Blank Page" />
      <Sidebar.Menu.Item title="Pace Page" />
    </Sidebar.Menu.Item>
    <Sidebar.Menu.Item icon={{ className: 'fa-share' }} title="Multilevel">
      <Sidebar.Menu.Item title="Level One" />
      <Sidebar.Menu.Item title="Level One">
        <Sidebar.Menu.Item title="Level Two" />
        <Sidebar.Menu.Item title="Level Two">
          <Sidebar.Menu.Item title="Level Three" />
        </Sidebar.Menu.Item>
      </Sidebar.Menu.Item>
      <Sidebar.Menu.Item title="Level One" />
    </Sidebar.Menu.Item>
    <Sidebar.Menu.Item icon={{ className: 'fa-book' }} title="Documentation" />
  </Sidebar.Menu>,
  <Sidebar.Menu header="LABELS" key="4">
    <Sidebar.Menu.Item icon={{ color: 'danger' }} title="Danger" />
    <Sidebar.Menu.Item icon={{ color: 'warning' }} title="Warning" />
    <Sidebar.Menu.Item icon={{ color: 'information' }} title="Information" />
  </Sidebar.Menu>,
]
*/

const sb = [
  <Sidebar.Menu key="3">
    <Sidebar.Menu.Item active icon={{ className: 'fa-database' }} title="数据集" />
    <Sidebar.Menu.Item icon={{ className: 'fa-sitemap' }} title="组织架构" />
    <Sidebar.Menu.Item icon={{ className: 'fa-tasks' }} title="项目" />
  </Sidebar.Menu>,
]

const getNav = (activeNav, gotoTab, orgName) => [
  <Sidebar.Menu key="3">
    <Sidebar.Menu.Item
      active={activeNav === 'home'}
      icon={{ className: 'fa-tasks' }}
      title="任务中心"
      onClick={() => gotoTab('/home')}
    />
    <Sidebar.Menu.Item
      active={activeNav === 'datasets'}
      icon={{ className: 'fa-database' }}
      title="数据集"
      onClick={() => gotoTab(`/org/${orgName}/dataset`)}
    />
    <Sidebar.Menu.Item
      active={activeNav === 'users'}
      icon={{ className: 'fa-sitemap' }}
      title="成员"
      onClick={() => gotoTab(`/org/${orgName}/user`)}
    />
    <Sidebar.Menu.Item
      active={activeNav === 'projects'}
      icon={{ className: 'fa-tasks' }}
      title="项目"
      onClick={() => gotoTab(`/org/${orgName}/project`)}
    />
    <Sidebar.Menu.Item
      active={activeNav === 'org'}
      icon={{ className: 'fa-users' }}
      title="组织"
      onClick={() => gotoTab('/org')}
    />
  </Sidebar.Menu>,
]

const getNavLabel = (activeNav, gotoTab, orgName) => [
  <Sidebar.Menu key="3">
    <Sidebar.Menu.Item
      active={activeNav === 'home'}
      icon={{ className: 'fa-tasks' }}
      title="任务中心"
      onClick={() => gotoTab('/home')}
    />
    <Sidebar.Menu.Item
      active={activeNav === 'org'}
      icon={{ className: 'fa-users' }}
      title="组织"
      onClick={() => gotoTab('/org')}
    />
  </Sidebar.Menu>,
]

const App = ({
  activeNav, gotoTab, children, user,
}) => (
  <Dashboard
    navbarChildren={navMenu()}
    sidebarChildren={
      user.plan === 'label'
        ? getNavLabel(activeNav, gotoTab, user.name)
        : getNav(activeNav, gotoTab, user.name)
    }
    sidebarMini
    theme="skin-black-light"
  >
    {children}
  </Dashboard>
)

App.propTypes = {
  children: PropTypes.node.isRequired,
}

const mapStateToProps = state => ({
  activeNav: globalDuck.selectors.activeNavItem(state),
  user: globalDuck.selectors.user(state),
})

const mapDispatchToProps = {
  gotoTab: path => push(path),
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(App)
